<template>
	<div id="app" class="container" style="margin-top:20px;margin-bottom:20px">
		<div class="header clearfix">
			<nav>
				<button v-show="logged" class="btn btn-default pull-right"
					@click="logout()"> Sign out</button>
				<router-link v-show="!logged" class="btn btn-primary pull-right"
					:to="{ name:'login' }">Sign in</router-link>
				<ul class="nav nav-pills pull-right">
					<li role="presentation"><router-link :to="{ name:'index' }">
						Home</router-link></li>
					<li role="presentation"><router-link :to="{ name:'exam' }">
						Exam</router-link></li></a></li>
				</ul>
			</nav>
			<h3>在线测试系统</h3>
		</div>
		
		<router-view></router-view>

		<footer class="footer">
	        <p class="text-center">Author: foolifish07 ,and his son Mr Zuo</p>
		</footer>
	</div>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex'

	let here = {
		name: 'app',
		computed: {
			...mapGetters('user', {
				logged: 'logged',
			}),
		},
		methods: {
			...mapActions('pages/login', { 
				logout: 'logout',
		    }),
		},
	}

	export default here;
</script>

<style>
	.header {
	  padding-bottom: 20px;
	  border-bottom: 1px solid #e5e5e5;
	}
	.header h3 {
	  margin-top: 0;
	  margin-bottom: 0;
	  line-height: 40px;
	}

	.footer {
	  padding-top: 19px;
	  color: #777;
	  border-top: 1px solid #e5e5e5;
	}
</style>
